<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>14. Viewer with UML Plugin</title>
    <link rel="stylesheet" href="./css/tuidoc-example-style.css" />
    <!-- Viewer -->
    <link rel="stylesheet" href="../dist/cdn/toastui-editor-viewer.css" />
  </head>
  <body>
    <div class="tui-doc-description">
      <strong
        >The example code can be slower than your environment because the code is transpiled by
        babel-standalone in runtime.</strong
      >
      <br />
      You can see the tutorial
      <a
        href="https://github.com/nhn/tui.editor/blob/master/apps/editor/docs/plugins.md"
       rel="noopener noreferrer" target="_blank"
        >here</a
      >.
    </div>
    <div class="code-html tui-doc-contents">
      <div id="viewer"></div>
    </div>
    <!-- Added to check demo page in Internet Explorer -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
    <script src="./data/md-plugins.js"></script>
    <!-- Editor -->
    <script src="../dist/cdn/toastui-editor-viewer.js"></script>
    <!-- Editor's Plugin -->
    <script src="https://uicdn.toast.com/editor-plugin-uml/1.0.0/toastui-editor-plugin-uml.min.js"></script>
    <script type="text/babel" class="code-js">
      const Viewer = toastui.Editor;
      const { uml } = Viewer.plugin;

      const viewer = new Viewer({
        el: document.querySelector('#viewer'),
        initialValue: umlContent,
        plugins: [uml]
      });
    </script>
  </body>
</html>
